<template>
	<div class="supplier-login">
		<div class="supplier-login__left">
			<div class="supplier-login__welcome-img"></div>
		</div>
		<div class="supplier-login__right">
			<loginForm ref="loginForm" class="supplier-login__login-form" @on-login="onLogin"></loginForm>
		</div>
	</div>
</template>
<script>
import loginForm from './components/LoginForm.vue'
export default {
	name: 'login',
	components: {
		loginForm
	},
	methods: {
		onLogin (data) {
			this.loginHandler(data).then(res => {
				// 验证码过期
				this.$store.commit('SET_LOGINER', {
					token: res.data.token,
					username: data.userName,
					name: res.data.user.name,
					userId: res.data.user.id
				})
				this.$fxLogger.setUserInfo(data.userName)
				this.$router.replace({ path: 'main' })
			}).catch(res => {
				if (res.code === 300000) {
					console.log(this.$refs)
					this.$refs.loginForm.getVerificationCode()
				}
			})
		},
		loginHandler (data) {
			return this.$fxApi('auth.loginIn')({ data })
		}
	}
}
</script>
<style lang="stylus" scoped>
.supplier-login {
	background: url('~images/img/login/loginBackGround.png');
	display :flex
	flex-direction: row
	height: 100%;
	align-items: center;
	&__left, &__right {
		flex: 1
	}
	&__left {
		text-align: right
	}
	&__right {
		text-align: left
	}
	&__welcome-img {
		display:inline-block;
		background-repeat: no-repeat
		background-position: center
		background-size: contain
		width: 632px
		height: 408px
		margin-right:30px
	}
	&__login-form {
		margin-left:200px;
	}
}
</style>

